<template>
  <div>
    <el-form :inline="true" :model="pageForm" class="demo-form-inline">
          <el-form-item label="省" prop="province">
            <el-select v-model="forms.province" @change="getshiid()" clearable placeholder="请选择省">
              <el-option
                v-for="item in shengoptions"
                :label="item.regionName"
                :value="item.regionId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市" prop="city">
            <el-select v-model="forms.city" @change="getxianid()" clearable placeholder="请选择市">
              <el-option
                v-for="item in shioptions"
                :label="item.regionName"
                :value="item.regionId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区" prop="county">
            <el-select v-model="forms.county" clearable placeholder="请选择区">
              <el-option
                v-for="item in xianoptions"
                :label="item.regionName"
                :value="item.regionId">
              </el-option>
            </el-select>
          </el-form-item>

      <el-form-item label="楼盘名称">
        <el-input v-model="pageForm.name" placeholder="请输入楼盘关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" :model="pageForm" class="demo-form-inline">
<!--      <el-form-item>-->
<!--        <el-radio-group v-model="pageForm.status">-->
<!--          <el-radio label="0" value="0"  @change="list">待看房</el-radio>-->
<!--          <el-radio label="1" value="1"  @change="list">已看房</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
<!--      <el-button type="warning" size="mini" @click="handleEdit">批量设置状态</el-button>-->
    </el-form>



    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼盘名称">
        </el-table-column>
        <el-table-column
          prop="showingsName"
          label="预约人">
        </el-table-column>
        <el-table-column
          prop="showingsMobile"
          label="联系人电话">
        </el-table-column>
        <el-table-column
          prop="roomName"
          label="预约房源">
        </el-table-column>
        <el-table-column
          prop="reserveTime"
          label="预约时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.reserveTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="预约状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status===0">待看房</div>
            <div v-if="scope.row.status===1">已看房</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageForm.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
  import {citylist, countrylist, editStatus, editStatus1, shenglist, Yuyulist,getsheng,getshi,getxian} from "@/api/system/reservation";
  export default {
    name: "index",
    data(){
      return{
        shengoptions:[],
        shioptions:[],
        xianoptions:[],
        tableData:[],
        pageForm:{
          pageNum:1,
          pageSize:10,
          // province:'',
          // city:'',
          // county:'',
          // userId:'',
          // status:'',
        },
        forms:{

        },
        total:0,
        sheng: [{
          regionName:'',
          regionId:'',
        }],
        city: [{}],
        country: [{}],
        ljform:{
          pid:0
        },
        saveForm :{

        },
        ids:[],
      }
    },
    methods:{
      list(){
        Yuyulist(this.pageForm).then(res=>{
          /*console.log(res);*/
          console.log(this.shengoptions);
          this.tableData=res.list;
          this.total=res.total;
        })
      },
      provinceChange(val) {
        /*console.log("!!"+val)*/
        this.city = [{}]
        this.ljform.pid = val
        /*console.log(this.ljform.pid)*/
        citylist(this.ljform).then(response => {
          this.city = response
        })
      },
      cityChange(val) {
        this.country = [{}]
        this.ljform.pid = val
       /* console.log(this.ljform.pid)*/
        countrylist(this.ljform).then(response => {
          this.country = response
        })
      }/*,
      getProvincelist() {
        shenglist().then(res=>{
       /!*   console.log(111111)
          console.log(res);*!/
          this.sheng=res;
        })
      }*/,
      handleSelectionChange(row){
        console.log(row)

        let s =  row.map(row => row.id);

        this.ids=s;

        // console.log(val[val.length-1].id)
        // this.saveForm.ids.push(val[val.length-1].id)
      },
      handleEdit(){
        // console.log(this.saveForm);
        // if(this.pageForm.status==0){
        //   //待看房
        //   let str=this.saveForm.ids.toString();
        //  /* console.log(str);*/
        //   editStatus({ids:this.saveForm}).then(res=>{
        //     this.list();
        //     this.saveForm.ids=[];
        //   })
        // }else{
        //   if(this.pageForm.status==1){
            //已看房
           /* console.log(this.saveForm);*/
            // let str=this.saveForm.ids.toString();
            console.log(this.ids)
            editStatus1({str:[this.ids]}).then(res=>{
              this.list();
            })
          },
        // }

      onSubmit(){
        this.list();
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageForm.pageSize=val;
        this.list();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageForm.pageNum=val;
        this.list();
      },
      getsheng(){
        getsheng().then(response => {
          this.shengoptions=response;
        });
      },
      getshiid(){
        console.log("getshi:",this.forms);
        getshi(this.forms).then(response=>{
          this.shioptions=response;
        })
      },
      getxianid(){
        console.log("getxian:",this.forms);
        getxian(this.forms).then(response=>{
          this.xianoptions=response;
        })
      }
    },
    created() {
      this.list();
      /*this.getProvincelist();*/
      this.getsheng();
    }
  }
</script>

<style scoped>

</style>
